<template>
  <!-- 根据 formItem 的 mutable 属性决定显示日期选择器还是文本 -->
  <el-date-picker
    v-if="isMutable"
    v-bind="formItem.props"
    v-model="dateVal"
    @change="onChange"
  />
  <span v-else>{{ text }}</span>
</template>
<script setup lang="ts">
import { ref, computed, defineProps, PropType, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
// 定义组件属性
const props = defineProps({
  // 透传至Form,用户数据
  model: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
  // formItem的表单配置
  formItem: {
    type: Object as PropType<{
      key: string | string[];
      mutable?: boolean;
      props?: Record<string, any>;
    }>,
    default: () => ({})
  }
})
// 使用 toRefs 解构 props 中的 model
const { model } = toRefs(props)
// 日期选择器绑定的值
const dateVal = ref<any>()
// 判断是否可编辑
const isMutable = computed(() =>
  props.formItem.mutable === undefined ? true : props.formItem.mutable
)
// 判断是否是日期范围选择
const isDateRange = computed(() => {
  return (
    Array.isArray(props.formItem.key) &&
    props.formItem.key.length === 2 &&
    props.formItem.key[0]
  )
})// 监听值变化，同步 dateVal 和 model 的值
watch(
  () => isDateRange.value ? [model.value[props.formItem.key[0]], model.value[props.formItem.key[1]]] : model.value[props.formItem.key],
  newVal => {
    if (isDateRange.value) {
      if (!newVal[0]) {
        model.value[props.formItem.key[1]] = ''
      }
      dateVal.value = newVal
    } else {
      dateVal.value = newVal
    }
  },
  { immediate: true }
)
// 日期选择器值改变时的处理函数
const onChange = (date: any) => {
  if (isDateRange.value) {
    const dateArray = date || ['', '']
    dateArray.forEach((value: string, index: number) => {
      const key = props.formItem.key[index]
      if (key) {
        model.value[key] = value
      } else {
        ElMessage.error('查找不到日期对应的key')
      }
    })
  } else {
    model.value[Array.isArray(props.formItem.key) ? props.formItem.key.join('.') : props.formItem.key] = date
  }
}
// 计算显示的文本
const text = computed(() => {
  if (isDateRange.value) {
    return `${model.value[props.formItem.key[0]]} ~ ${model.value[props.formItem.key[1]]}`
  } else if (Array.isArray(model.value[Array.isArray(props.formItem.key) ? props.formItem.key.join('.') : props.formItem.key])) {
    return `${model.value[Array.isArray(props.formItem.key) ? props.formItem.key.join('.') : props.formItem.key][0]} ~ ${model.value[Array.isArray(props.formItem.key) ? props.formItem.key.join('.') : props.formItem.key][1]}`
  }
  return model.value[Array.isArray(props.formItem.key) ? props.formItem.key.join('.') : props.formItem.key]
})
</script>
